<template>
  <div v-for="(item, index) in data" :key="index">
    <button @click="clickTab(item)">{{ item.name }}</button>
  </div>

  <component :is="curry.comName"></component>
</template>

<script setup lang="ts">
import A from '../src/动态组件/A.vue'
import B from '../src/动态组件/B.vue'
import C from '../src/动态组件/C.vue'
import { reactive,markRaw } from 'vue';

type Tabs = {
  name:string,
  comName:any
}

const data = reactive<Tabs[]>([
  {
    name:'A',
    comName:markRaw(A)
  },
  {
    name:'B',
    comName:markRaw(B)
  },
  {
    name:'C',
    comName:markRaw(C)
  },
])

type Com = Pick<Tabs,'comName'>

let curry = reactive<Com>({
  comName:data[0].comName
})

const clickTab = ( item : Tabs) => {
  curry.comName  = item.comName
}

</script>

<style lang='scss' scoped>

</style>
